import { SearchBar } from "antd-mobile";
import { Helmet } from "react-helmet-async";
const hotTips = [
  { title: "户外登山鞋", id: 1 },
  { title: "金士顿内存", id: 2 },
  { title: "金士鳄鱼皮钱包", id: 3 },
  { title: "移动路由器", id: 4 },
  { title: "多功能沙发", id: 5 },
];
export default function Search() {
  return (
    <div>
      <Helmet>
        <title>搜索</title>
      </Helmet>
      <div className="p-4 border-b border-gray-100 bg-white">
        <SearchBar placeholder="请输入内容"></SearchBar>
      </div>
      <div className="hot-s p-4">
        <div className="flex">
          <div className="text-base">热门搜索</div>
        </div>
        <div className="hot-tips flex flex-wrap gap-2 mt-3">
          {hotTips.map((item) => {
            return (
              <div
                className="px-2 py-1 text-xs rounded bg-gray-100"
                key={item.id}
              >
                {item.title}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
